<template>
    <div class="writeBody">
        <el-input v-model="title" placeholder="请输入标题"></el-input>
        <quill-editor
            class="quill"
            v-model="content"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
            style="height:390px;"
        ></quill-editor>
        <div style="display:none;">
            <el-upload
                action
                list-type="picture-card"
                :on-change="handlePictureCardPreview"
                :on-remove="handleRemove"
                :auto-upload="false"
            >
                <i class="el-icon-plus"></i>
            </el-upload>
        </div>
        <div
            style="right: 120px;bottom: 70px;position: fixed;display: flex;align-items: center;justify-content: center;font-size: 20px;cursor: pointer;z-index: 5;"
        >
            <el-button type="primary" plain @click="fb">上传审核</el-button>
        </div>
        <!-- <el-dialog>
            <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>-->
        <!-- <p class="ql-editor" v-html="content"></p> -->
    </div>
</template>
<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
const toolbarOptions = [
    ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
    ["blockquote"], // 引用  代码块-----['blockquote', 'code-block']
    [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
    [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
    [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
    [{ indent: "-1" }, { indent: "+1" }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
    [{ direction: "rtl" }], // 文本方向-----[{'direction': 'rtl'}]
    [{ size: ["small", false, "large", "huge"] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
    [{ font: [] }], // 字体种类-----[{ font: [] }]
    [{ align: [] }], // 对齐方式-----[{ align: [] }]
    ["image"], // 链接、图片、视频-----['link', 'image', 'video']
    ["clean"] // 清除文本格式-----['clean']
];

export default {
    components: {
        quillEditor
    },
    data() {
        return {
            content: null,
            editorOption: {
                placeholder: "请输入文章内容......",
                theme: "snow",
                modules: {
                    toolbar: {
                        container: toolbarOptions,
                        handlers: {
                            image: function(value) {
                                if (value) {
                                    // 触发input框选择图片文件
                                    document
                                        .querySelector(".el-upload")
                                        .click();
                                } else {
                                    this.quill.format("image", false);
                                }
                            }
                        }
                    }
                }
            },
            //////
            dialogImageUrl: "",
            title: ""
        };
    },
    methods: {
        onEditorReady(editor) {
            // 准备编辑器
            // console.log(this.content);
        },
        onEditorBlur() {
            // console.log(this.content);
        }, // 失去焦点事件
        onEditorFocus() {
            // console.log(this.content);
        }, // 获得焦点事件
        onEditorChange() {
            // console.log(this.content);
        }, // 内容改变事件
        //////
        handleRemove(file, fileList) {
            // console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            window.URL = window.URL || window.webkitURL;
            let quill = this.$refs.myQuillEditor.quill;
            // console.log(quill);
            this.dialogImageUrl = file.url;
            let length = quill.selection.savedRange.index;
            // 插入图片  res.info为服务器返回的图片地址
            quill.insertEmbed(length, "image", file.url);
            // console.log(length, file.url);
            // 调整光标到最后
            quill.setSelection(length + 1);
        },
        fb() {
            this.$message({ message: "上传成功，内容审核中", type: "success" });

            this.$router.push({
                path: "/"
            });
            // this.$router.push({
            //     path: "/show",
            //     query: {
            //         title: this.title,
            //         content: this.content
            //     }
            // });
        }
    }
};
</script>
<style>
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
    content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
    content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
    content: "32px";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: "标题6";
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
    content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
    content: "等宽字体";
}
/* 
///// */
div.writeBody {
    min-height: 470px;
}
div.writeBody ul.el-upload-list--picture-card li.el-upload-list__item {
    width: auto;
    height: auto;
}
div.writeBody {
    margin: 10px 100px;
    background-color: #fff;
}
</style>

